<template>
  <div id='crgResultComp'>
    <Splitpanes style="height:100%;" horizontal>
      <Pane size="20">
        <div>
          <vxe-toolbar class-name="bg-gray solid-top">
            <template #tools>
              <div class="justify-start padding-right-xs text-bold">
                <span>工作流程</span>
              </div>
            </template>
          </vxe-toolbar>
        </div>
        <div class='crgResultCompTable' :style='{ height: isChildren ? "calc(100% - 40px)" : "calc(100% - 40px)" }'>
          <vxe-table ref='identificationResultTable' v-loading='loading' border height='auto' :data='wLWkfList'
                     :row-config='{ isCurrent: true, isHover: true }'
                     :mouse-config='{ selected: true }' :keyboard-config='{ isArrow: true, isTab: true, isEdit: false }' resizable
                     show-overflow>
            <vxe-column field="code" title="编号" width="80"></vxe-column>
            <vxe-column field="wf.name" title="工作流程" width="120"></vxe-column>
            <vxe-column field="startDate" title="开始时间" width="120"></vxe-column>
            <vxe-column field="endDate" title="结束时间" width="120"></vxe-column>
            <vxe-column field="duration" title="时长" min-width="100"></vxe-column>
          </vxe-table>
        </div>
      </Pane>
      <Pane size="40">
        <div>
          <vxe-toolbar class-name="bg-gray solid-top">
            <template #tools>
              <div class="flex justify-content-end padding-right-xs text-bold">
                <span>菌落形态</span>
              </div>
            </template>
          </vxe-toolbar>
        </div>
        <div class='crgResultCompTable' :style='{ height: isChildren ? "calc(100% - 40px)" : "calc(100% - 40px)" }'>
          <vxe-table ref='ASTResultCompTable' v-loading='loading' border height='auto' :data='observationResultList'
                     :row-config='{ isCurrent: true, isHover: true }'
                     :mouse-config='{ selected: true }' :keyboard-config='{ isArrow: true, isTab: true, isEdit: false }' resizable
                     show-overflow>
            <vxe-column field="isolateNumber" title="编号" width="30"></vxe-column>
            <vxe-column field="colonialMorphology.code" title="" width="30"></vxe-column>
            <vxe-column field="colonialMorphologyName" title="形态" min-width="220"></vxe-column>
            <vxe-column field="operater.name" title="操作人" width="50"></vxe-column>
            <vxe-column field="operateDate" title="操作时间" width="120"></vxe-column>
          </vxe-table>
        </div>
      </Pane>
      <Pane size="40">
        <div>
          <vxe-toolbar class-name="bg-gray solid-top">
            <template #tools>
              <div class="flex justify-content-end padding-right-xs text-bold">
                <span>染色</span>
              </div>
            </template>
          </vxe-toolbar>
        </div>
        <div class='crgResultCompTable' :style='{ height: isChildren ? "calc(100% - 40px)" : "calc(100% - 40px)" }'>
          <vxe-table ref='ASTResultCompTable' v-loading='loading' border height='auto' :data='tableDataCT3xjjd3'
                     :row-config='{ isCurrent: true, isHover: true }'
                     :mouse-config='{ selected: true }' :keyboard-config='{ isArrow: true, isTab: true, isEdit: false }' resizable
                     show-overflow>
            <vxe-column type="seq" width="30"></vxe-column>
            <vxe-column field="name" title="报告" width="30" align="center" show-overflow></vxe-column>
            <vxe-column field="isolateNumber" title="编号" width="40" show-overflow></vxe-column>
            <vxe-column field="stainingMethod.name" title="染色方法" width="120" show-overflow></vxe-column>
            <vxe-column field="stainingConclusion.name" title="项目" min-width="100" show-overflow></vxe-column>
            <vxe-column field="stainingConclusionOptionName" title="结果" width="80" show-overflow></vxe-column>
            <vxe-column field="operater.name" title="操作人" width="80" show-overflow></vxe-column>
            <vxe-column field="operateDate" title="操作日期" width="80" show-overflow></vxe-column>
          </vxe-table>
        </div>
      </Pane>
    </Splitpanes>

  </div>
</template>
<script lang='ts' setup>
import {reactive, ref, getCurrentInstance} from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
let {proxy}: any = getCurrentInstance();

let isChildren = ref(false);
let pageIndex = ref(1);
let totalCount = ref(0);
let loading = ref(false);
let wLWkfList = reactive([]);//工作流程
let observationResultList = ref(null);//菌落形态列表
let tableDataCT3xjjd3 = ref(null);//染色列表


let form = reactive({
  searchValue: ''
})
</script>
<style lang='scss' scoped>
@import "@/assets/css/isd-body.scss";

#crgResultComp {
  height: 100%;

  .crgResultCompTable {
    height: calc(100vh - 160px);
  }
}
</style>